<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index2.css"/>
    <link rel="stylesheet" href="css/highexp.css"/>
    <link rel="stylesheet" href="css/friendlistpage.css"/>
    <style>
        html{
            height:100%;
            background:#ececec;
        }
        body#addlabelpage{
            background:#fff;
            height: 100%;
            /*overflow: scroll;*/
        }
        #addlabelpage .header_action_buttons{
            padding:0 20px;
            line-height: 44px;
            font-size: 15px;
            color: #fff;
        }
        #addlabelpage .title{
            text-align: center;
            margin: 0 auto;
            width:120px;
            height:44px;
            line-height: 44px;
            font-size: 15px;
            color: #fff;
        }
        #addlabelpage .labellist{
            padding-left:20px;
        }
        #addlabelpage .labellist:last-child{
            border-bottom: 1px solid #ececec;
        }
        #addlabelpage .labellist>div{
            padding:15px 0 15px 0;
            border-bottom: 1px solid #ececec;
        }
        #addlabelpage .labellist:last-child>div{
            border-bottom:none;
        }
        /*标签详情页*/
        #addlabelpage #labelpage{
            background: #ececec;
            height:100%;
            /*overflow: scroll;*/
        }
        #addlabelpage .labeltitle{
            padding:12px 0 8px 20px;
            font-size: 11px;
            color:#999;
            background: #ececec;
        }
        #addlabelpage #changelabelname{
            padding:8px 18px;
            border-top:1px solid #EEEEEF;
            border-bottom:1px solid #EEEEEF ;
            background: #fff;
        }
        #addlabelpage #changelabelname>input{
            width:100%;
            height: 100%;
            font-size: 17px;
        }
        #addlabelpage .memberplace{
            padding-left:5%;
            padding-top:5%;
            overflow: hidden;
            background: #fff;
            border-bottom: #E0E0E1;
        }
        #addlabelpage .memberbox{
            width:15%;
            margin-right:5%;
            padding-bottom: 10px;
            float: left;
            position: relative;
        }
        #addlabelpage .memberbox1 {
            width: 15%;
            margin-right: 5%;
            padding-bottom: 10px;
            float: left;
            position: relative;
        }
        #addlabelpage .memberbox>a{
            width:100%;
            border-radius: 4px;
        }
        #addlabelpage .memberbox>a.xdelete{
            position: absolute;
            top: -6px;
            right: -6px;
            width: 20px;
            height: 20px;
            z-index: 10;
            border-radius: 50%;
            /* border: 1px solid #ddd; */
            color: #fff;
            line-height: 20px;
            text-align: center;
            background: #B92B27;
            /* font-size: 16px; */
            font-size: 11px;
        }
        #addlabelpage .memberbox>.membername{
            width:100%;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
            text-align: center;
            font-size: 10px;
            padding-top:4px;
            color:#555;
        }
        #addlabelpage .memberbox>a>img{
            width:100%;
            border-radius: 4px;
        }
        #addlabelpage .memberbox1>a>img{
            width:100%;
            border-radius: 4px;
        }
        #addlabelpage #deletelabelbtn{
            margin:30px 10px 0 10px;
            background: #E85858;
            border-radius:6px ;
            text-align: center;
            font-size: 18px;
            padding: 6px 10px;
            color: #fff;
            margin-bottom:50px;
        }
        /*好友列表页*/
        #addlabelpage #imgchoicefriend{
            height:100%;
            overflow: scroll;
            background: #ececec;
        }
        /*搜索部分*/
        #addlabelpage .inputsearchbox {
            position: fixed;
            z-index: 200;
            max-width:1000px;
            top: 44px;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
        }
        #addlabelpage .inputsearchbox>div:first-child {
            height: 58px;
            border:1px solid #ddd;
        }
        #addlabelpage .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper {
            left: 20px;
            right: 20px;
            top: 12px;
        }
        #addlabelpage .header_action_buttons.mweb_lookup_bar_has_input>div.mweb_lookup_bar_input_wrapper>div.mweb_lookup_bar_input {
            border: 1px solid #ddd;
            background: #fff url(img/search.png) no-repeat 8px center;
            background-size: 13px;
            height:33px;
            overflow: hidden;
            width:100%;
            box-sizing: border-box;
        }
        #addlabelpage #csearchbtn {
            position: absolute;
            top: 2px;
            left: 0;
            width: 25px;
            height: 27px;
            background: transparent;
            z-index: 100;
        }
        #addlabelpage .mweb_lookup_bar_input>input {
            color: #999;
            position: absolute;
            left:30px;
            box-sizing: border-box;
            width:89%;
        }
        /*右侧导航条*/
        #addlabelpage .rightnav1>div {
            color: #313131;
            font-size: 12px;
        }
        #heightexpdiv .title{
            margin-left:0;
            text-align:left;
            font-size:20px;
            color:#303030;
        }
        .Header .fixed_header .header_main .header_action_buttons{
            left: inherit;
        }
        #nolabel{
            display:none;
            text-align: center;
            font-size: 15px;
            color: #999;
            padding: 15px 20px;
        }
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="addlabelpage">
<!--主页面-->
<div class="PageWrapper nonav" id="mainpage" style="display: block">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header">
            <div class="header_main">
                <button class="mweb_modal_back_button"></button>
                <div class="title">
                    标签
                </div>
                <div class="header_action_buttons" style="height: 100%" id="addnewlabelbtn">
                    新建
                </div>
            </div>
        </div>
    </div>
    <!-- 加载群组部分-->
    <div id="labelplace">

    </div>
    <div id="nolabel">您还没有创建标签组...</div>
</div>
<!--标签详情页 -->
<div class="PageWrapper nonav" id="labelpage" style="display: none">
    <!-- 头部-->
    <div class="Header ModalHeader">
        <div class="fixed_header">
            <div class="header_main">
                <button class="mweb_modal_back_button" id="labelgobackbtn"></button>
                <div class="title" style="min-width:100px;">
                    标签成员
                </div>
                <div class="header_action_buttons" style="height: 100%" id="savechangebtn">
                    保存
                </div>
            </div>
        </div>
    </div>
    <!--页面部分-->
    <div class="labelpagetitle">
        <div class="labeltitle">
            标签名字
        </div>
        <div id="changelabelname">
            <input type="text"/>
        </div>
        <div class="labeltitle">
            标签成员
        </div>
        <div class="memberplace">
            <!-- +号 -->
            <div class="memberbox1" style="margin-bottom:20px;" id="addmemberbtn">
                <a>
                    <img src="img/addimgbackground2.png" style="box-sizing: border-box;border: 2px solid #AAB8B8;border-radius: 4px"/>
                </a>
            </div>
            <!-- -号 -->
            <div class="memberbox1" style="margin-bottom:20px;" id="delmemberbtn">
                <a href="#">
                    <img src="img/jianhao03.png" style="box-sizing: border-box;border: 2px solid #AAB8B8;border-radius: 4px"/>
                </a>
            </div>
        </div>
        <div id="deletelabelbtn">
            删除标签
        </div>
    </div>
</div>
<!--删除提醒-->
<div id="heightexpdiv">
    <div>
        <div class="heightexpform">
            <div>
                <div class="title">提示</div>
                <div class="noteword">标签中的联系人不会被删除，是否删除标签？</div>
                <div class="btndiv">
                    <div id="heightexpok" class="rt">确定</div>
                    <div id="heightexpno" class="rt">取消</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--好友列表页-->
<div class="PageWrapper nonav" id="imgchoicefriend" style="display:none;margin-top:102px;">
    <div class=" has_toolbar">
        <!-- 头部-->
        <div class="Header ModalHeader">
            <div class="fixed_header">
                <div class="header_main">
                    <button class="mweb_modal_back_button" id="friendgobackbtn"></button>
                    <div class="title">
                        选择好友
                    </div>
                    <div class="header_action_buttons" style="height: 100%" id="imgchoicedFDokbtn">
                        确定
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框-->
        <div class="inputsearchbox">
            <div>
                <div class="header_action_buttons mweb_lookup_bar_has_input">
                    <div class="mweb_lookup_bar_input_wrapper ">
                        <div class="mweb_lookup_bar_input" style="min-height: 29px;position:relative;font-size: 14px; color:#BC7F74;">
                            <div id="csearchbtn"></div>
                            <input type="text" id="csearchinput" placeholder="搜索"  maxlength="15"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 好友列表部分-->
        <div id="listplace" style="display: block;">
            <div class="Section">
                <!-- 主列表-->
                <div class="Cell" id="a">
                    <div id="jinghao" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!-- 搜索列表-->
                <div class="Cell" id="a1">
                    <div id="jinghao1" style="display: none">
                        <div class="section_header section_header_gray">
                            <span>#</span>
                        </div>
                    </div>
                </div>
                <!--右侧导航条-->
                <div class="rightnav1" style="display: block;">
                    <div id="jinghaobtn"><a href="#">#</a></div>
                    <div class="zmbtn">A</div>
                    <div class="zmbtn">B</div>
                    <div class="zmbtn">C</div>
                    <div class="zmbtn">D</div>
                    <div class="zmbtn">E</div>
                    <div class="zmbtn">F</div>
                    <div class="zmbtn">G</div>
                    <div class="zmbtn">H</div>
                    <div class="zmbtn">I</div>
                    <div class="zmbtn">J</div>
                    <div class="zmbtn">K</div>
                    <div class="zmbtn">L</div>
                    <div class="zmbtn">M</div>
                    <div class="zmbtn">N</div>
                    <div class="zmbtn">O</div>
                    <div class="zmbtn">P</div>
                    <div class="zmbtn">Q</div>
                    <div class="zmbtn">R</div>
                    <div class="zmbtn">S</div>
                    <div class="zmbtn">T</div>
                    <div class="zmbtn">U</div>
                    <div class="zmbtn">V</div>
                    <div class="zmbtn">W</div>
                    <div class="zmbtn">X</div>
                    <div class="zmbtn">Y</div>
                    <div class="zmbtn">Z</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/tohref.js"></script>
<script src="ftnjs/urlnote.js"></script>
<script src="ftnjs/ctoe.js"></script>
<script src="js/addlabel.js"></script>
</body>
</html>